<template>
  <div class="search-container">
    <el-input
      v-model="searchTerm"
      :placeholder="placeholder"
      @keyup.enter="handleSearch"
      clearable
      @clear="handleReset"
    >
      <template #append>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </template>
    </el-input>
    <el-button @click="handleReset" class="reset-button">重置</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  placeholder: {
    type: String,
    default: '请输入搜索关键词'
  }
})

const emit = defineEmits(['search'])
const searchTerm = ref('')

const handleSearch = () => {
  emit('search', searchTerm.value)
}

const handleReset = () => {
  searchTerm.value = ''
  emit('search', '')
}
</script>

<style scoped>
.search-container {
  display: flex;
  width: 33.33%;
}
.reset-button {
  margin-left: 10px;
}
</style>
